import { FIEngine } from './framework/FIEngine.js';
import { FISprite } from './framework/FISprite.js';
import { FIImage } from "./framework/FIImage.js";
import { FIAnimationFramesPool } from "./framework/FIAnimation.js";
import { Selector } from './game/Selector.js';
import { Rect } from './base/Rect.js';

let blocks = [
  [
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  ], [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 7, 8, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 7, 8, 0, 0, 0, 0, 0, 0],
  ], [
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 6, 6, 6, 6, 0, 0, 0],
    [0, 0, 0, 5, 5, 5, 5, 0, 0, 0],
    [0, 9, 10, 1, 1, 1, 1, 7, 8, 0],
    [0, 9, 10, 1, 1, 1, 1, 7, 8, 0],
    [0, 9, 10, 1, 1, 1, 1, 7, 8, 0],
    [0, 9, 10, 1, 1, 1, 1, 7, 8, 0],
    [0, 0, 0, 4, 4, 4, 4, 0, 0, 0],
    [0, 0, 0, 3, 3, 3, 3, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  ], [
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 1, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 4, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 3, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  ]
]
blocks = [blocks[0]]

const zLen = blocks[0].length;
const yLen = blocks.length;
const brickVW = 32;
const brickVH = 32;
const brickFH = 16;
const terrainX = ((zLen - 1) * brickVW / 2) + brickVW / 2
const terrainY = ((yLen - 1) * brickFH) + brickVW / 2


const engine = new FIEngine(document.body);
const img = engine.getImg('./0.png');
const terrain = new FISprite()
engine.scene.addChild(terrain);

FIAnimationFramesPool.get().addFrames({
  name: 'abc',
  frames: [{
    source: img,
    rect: new Rect(0, 0, 32, 32),
    duration: 1000
  }, {
    source: img,
    rect: new Rect(33, 0, 32, 32),
    duration: 1000
  }],
  loop: 5,
  next: 'aa'
})
FIAnimationFramesPool.get().addFrames({
  name: 'aa',
  frames: [{
    source: img,
    rect: new Rect(0, 33, 32, 32),
    duration: 1000
  }, {
    source: img,
    rect: new Rect(33, 33, 32, 32),
    duration: 1000
  }],
  loop: 5,
})
const createBrick = (id: number, x: number, y: number, z: number) => {
  if (!id) { return; }
  const sourceY = Math.floor((id - 1) / 2)
  const sourceX = Math.floor((id - 1) % 2)
  const brick = new FIImage();
  brick.id = `${x}_${y}_${z}`;
  brick
    .move(terrainX + (x - z) * brickVW / 2, terrainY + brickFH * (x + z) / 2 - (y * brickFH))
    .resize(brickVW, brickVH)
    .anchor(brickVW / 2, brickVH / 2)
    .setSource(img)
    .setSourceRect({
      x: sourceX * (brickVW + 1),
      y: sourceY * (brickVH + 1),
      h: brickVW,
      w: brickVH
    });
  terrain.addChild(brick)
}

for (let y = 0; y < yLen; ++y) {
  const layerArr = blocks[y];
  const layerLen = layerArr.length;
  for (let z = 0; z < layerLen; ++z) {
    const rowArr = layerArr[z];
    const rowLen = rowArr.length;
    for (let x = 0; x < rowLen; ++x) {
      const id = rowArr[x];
      createBrick(id, x, y, z);
    }
  }
}
// (terrain.findChild('0_0_0') as FISprite | undefined)?.scale(0.5)
// console.log()

export const selector = new Selector(engine);
engine.scene.addChild(selector);
engine.loop(0);

// engine.createMouse().onLBDown = () => console.log('onLBDown')
// engine.createMouse().onLBMove = () => console.log('onLBMove')
// engine.createMouse().onLBUp = () => console.log('onLBUp')

let b: FIImage | undefined;

const mouse = engine.createMouse()
mouse.onRBDown = (e) => {
  const c45 = Math.cos(Math.PI / 4)
  const s45 = Math.sin(Math.PI / 4)
  e.x -= terrainX;
  e.y *= 2;
  const x = (e.x * c45 + e.y * s45) / (brickVW / Math.sqrt(2));
  const z = (e.y * c45 - e.x * s45) / (brickVW / Math.sqrt(2));
  const nb = terrain.findChild(`${Math.floor(x)}_${0}_${Math.floor(z)}`) as FIImage | undefined;
  if (nb != b) {
    if (b) b.ay += 5
    b = nb
    if (b) b.ay -= 5
  }
}
mouse.onRBMove = mouse.onRBDown
mouse.onRBUp = () => {
  if (b) b.ay += 5
  b = undefined;
}